<style lang="scss" scoped>
.well {
  margin-top: -16px;
  margin-left: -16px;
  background-color: #fafafa;
  display: flex;
  height: 80px;
  align-items: center;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}
</style>
<template>
  <div>
    <div class="well">
      <!-- 单击设置visible为true -->
      <el-button @click="visible = true">新增 {{ visible }}</el-button>
    </div>
    <h2>角色管理</h2>
    <el-table :data="usergroupList" style="width: 100%">
      <el-table-column prop="id" label="id" width="50"> </el-table-column>
      <el-table-column prop="name" label="名称" width="150"> </el-table-column>
      <el-table-column prop="isSys" width="100" label="系统管理员">
      </el-table-column>
      <el-table-column prop="ranges" width="80" label="范围"> </el-table-column>
      <el-table-column prop="description" label="描述"> </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="
              visibleCheck = true;
              check(scope.row);
            "
            >查看{{ visibleCheck }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      layout="prev, pager, next"
      :current-page="pagination.current"
      @current-change="currentChange"
      :total="pagination.total"
    >
    </el-pagination>
    <!-- :visible.sync="visible   是 :visible="visible"  @visible:update="visible=$event"的简写
        实现了类似父组件与子组件数据的双向改变（子组件好像更改了父组件的数据）
     -->
    <AddUserGroup :visible.sync="visible"></AddUserGroup>
    <CheckUserGroup
      :visible.sync="visibleCheck"
      :scope="scope"
    ></CheckUserGroup>
    <!-- <AddUserGroup :visible="visible" @visible:update="visible=$event"></AddUserGroup> -->
  </div>
</template>
<script>
// 导入api
import { GetUserGroup } from "@/api/permission";
// 导入添加用户组件
import AddUserGroup from "@/components/AddUserGroup.vue";
import CheckUserGroup from "@/components/CheckUserGroup.vue";
export default {
  components: { AddUserGroup, CheckUserGroup },
  data() {
    return {
      visible: false,
      visibleCheck: false,
      // 用户组列表
      usergroupList: [],
      search: {
        size: 10,
        order: "asc",
      },
      // 分页信息
      pagination: {},
      scope: this.scope,
    };
  },
  // provide:{
  //   check:this.check
  // },
  created() {
    this.getUserGroup();
  },
  methods: {
    check(e) {
      console.log(e);
      this.scope = e;
    },
    currentChange(val) {
      // 更新搜索条件的分页信息
      this.search.current = val;
      // 获取最新店铺
      this.getUserGroup();
    },
    // 获取用户组件
    getUserGroup() {
      GetUserGroup(this.search).then((res) => {
        // 更新用户组信息
        this.usergroupList = res.data.data;
        // 更新分页信息
        this.pagination = res.data.pagination;
        // 转换为数字（修复bug，让后端解决）
        this.pagination.current = this.pagination.current * 1;
        this.pagination.total = this.pagination.total * 1;
      });
    },
  },
};
</script>